import * as React from "react"
import { ViewStyle, View } from "react-native"
import { Button } from "../../components/button/button"
import { DatePicker as TimePicker, List, Provider } from "@ant-design/react-native"
import { px2dp } from "@/utils"
import { color } from "../../theme/base/color"

const datePickerWrapStyle: ViewStyle = {
  height: px2dp(20),
  marginTop: px2dp(14)
}

const resetBtnStyle: ViewStyle = {
  flex: 1,
  backgroundColor: color.background,
  borderRadius: 0,
  borderTopColor: color.themeColor,
  padding: px2dp(14)
}

const confirmBtnStyle: ViewStyle = {
  flex: 1,
  backgroundColor: color.themeColor,
  borderRadius: 0,
  padding: px2dp(14)
}

export interface DatePickerState {
  curTime: any
  daysAgo90: any
  sTime: any
  eTime: any
}

export interface DatePickerProps {}

// 时间校验:
// 1.开始时间不能大于结束时间
// 2.不输入默认时间为今天 0~24时
// 3.最多只能查询90天数据 🐶
// 4.结束时间最大为今天 🐶

const currentDate: any = new Date()

class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
  state = {
    curTime: currentDate,
    daysAgo90: new Date(currentDate - 7776000000),
    sTime: undefined,
    eTime: undefined
  }

  onChangeEndTime = eTime => {
    this.setState({ eTime })
    console.log(eTime)
  }

  onChangeStartTime = sTime => {
    this.setState({ sTime })
  }

  resetDate = () => {
    this.setState({
      sTime: undefined,
      eTime: undefined
    })
  }

  onHandleSubmit = () => {
    let st = this.state.sTime
    let et = this.state.eTime
    if (st > et) {
      alert("开始时间不能大于结束时间")
    } else {
      alert("请求数据")
    }
  }

  render() {
    return (
      <Provider>
        <View style={{ flex: 1 }}>
          <List style={datePickerWrapStyle}>
            <TimePicker
              value={this.state.sTime}
              mode="datetime"
              defaultDate={new Date()}
              minDate={this.state.daysAgo90}
              maxDate={this.state.curTime}
              onChange={this.onChangeStartTime}
              format="YYYY-MM-DD HH-mm"
            >
              <List.Item>起始时间:</List.Item>
            </TimePicker>
            <TimePicker
              value={this.state.eTime}
              mode="datetime"
              defaultDate={new Date()}
              minDate={this.state.daysAgo90}
              maxDate={this.state.curTime}
              onChange={this.onChangeEndTime}
              format="YYYY-MM-DD HH-mm"
            >
              <List.Item>结束时间:</List.Item>
            </TimePicker>
          </List>
        </View>
        <View
          style={{
            flexDirection: "row",
            borderTopColor: "#eee",
            borderTopWidth: px2dp(1),
            borderStyle: "solid"
          }}
        >
          <Button
            text="重置"
            style={resetBtnStyle}
            textStyle={{ color: color.themeColor, fontSize: px2dp(18) }}
            onPress={this.resetDate}
          ></Button>
          <Button
            text="确定"
            style={confirmBtnStyle}
            textStyle={{ fontSize: px2dp(18) }}
            onPress={this.onHandleSubmit}
          ></Button>
        </View>
      </Provider>
    )
  }
}

export default DatePicker
